<!DOCTYPE html>

<html>
<head>
  <title>github-user-store.coffee</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  <link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
  <div id="container">
    <div id="background"></div>
    
    <ul class="sections">
        
          <li id="title">
              <div class="annotation">
                  <h1>github-user-store.coffee</h1>
              </div>
          </li>
        
        
        
        <li id="section-1">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-1">&#182;</a>
              </div>
              
            </div>
            
            <div class="content"><div class='highlight'><pre>_ = <span class="hljs-built_in">require</span> <span class="hljs-string">'underscore-plus'</span>
Reflux = <span class="hljs-built_in">require</span> <span class="hljs-string">'reflux'</span>
request = <span class="hljs-built_in">require</span> <span class="hljs-string">'request'</span>
{FocusedContactsStore} = <span class="hljs-built_in">require</span> <span class="hljs-string">'nylas-exports'</span>

<span class="hljs-built_in">module</span>.exports =</pre></div></div>
            
        </li>
        
        
        <li id="section-2">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-2">&#182;</a>
              </div>
              <p>This package uses the Flux pattern - our Store is a small singleton that
observes other parts of the application and vends data to our React
component. If the user could interact with the GithubSidebar, this store
would also listen for <code>Actions</code> emitted by our React components.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>GithubUserStore = Reflux.createStore

  <span class="hljs-attribute">init</span>: <span class="hljs-function">-&gt;</span>
    <span class="hljs-property">@_profile</span> = <span class="hljs-literal">null</span>
    <span class="hljs-property">@_cache</span> = {}
    <span class="hljs-property">@_loading</span> = <span class="hljs-literal">false</span>
    <span class="hljs-property">@_error</span> = <span class="hljs-literal">null</span></pre></div></div>
            
        </li>
        
        
        <li id="section-3">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-3">&#182;</a>
              </div>
              <p>Register a callback with the FocusedContactsStore. This will tell us
whenever the selected person has changed so we can refresh our data.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-property">@listenTo</span> FocusedContactsStore, <span class="hljs-property">@_onFocusedContactChanged</span></pre></div></div>
            
        </li>
        
        
        <li id="section-4">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-4">&#182;</a>
              </div>
              <p>Getter Methods</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>
  <span class="hljs-attribute">profileForFocusedContact</span>: <span class="hljs-function">-&gt;</span>
    <span class="hljs-property">@_profile</span>

  <span class="hljs-attribute">loading</span>: <span class="hljs-function">-&gt;</span>
    <span class="hljs-property">@_loading</span>

  <span class="hljs-attribute">error</span>: <span class="hljs-function">-&gt;</span>
    <span class="hljs-property">@_error</span></pre></div></div>
            
        </li>
        
        
        <li id="section-5">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-5">&#182;</a>
              </div>
              <p>Called when the FocusedContactStore <code>triggers</code>, notifying us that the data
it vends has changed.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  <span class="hljs-attribute">_onFocusedContactChanged</span>: <span class="hljs-function">-&gt;</span></pre></div></div>
            
        </li>
        
        
        <li id="section-6">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-6">&#182;</a>
              </div>
              <p>Grab the new focused contact</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    contact = FocusedContactsStore.focusedContact()</pre></div></div>
            
        </li>
        
        
        <li id="section-7">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-7">&#182;</a>
              </div>
              <p>First, clear the contact that we’re currently showing and <code>trigger</code>. Since
our React component observes our store, <code>trigger</code> causes our React component
to re-render.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-property">@_error</span> = <span class="hljs-literal">null</span>
    <span class="hljs-property">@_profile</span> = <span class="hljs-literal">null</span>

    <span class="hljs-keyword">if</span> contact
      <span class="hljs-property">@_profile</span> = <span class="hljs-property">@_cache</span>[contact.email]</pre></div></div>
            
        </li>
        
        
        <li id="section-8">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-8">&#182;</a>
              </div>
              <p>Make a Github search request to find the matching user profile</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      <span class="hljs-property">@_githubFetchProfile</span>(contact.email) <span class="hljs-keyword">unless</span> <span class="hljs-property">@_profile</span>?

    <span class="hljs-property">@trigger</span>(@)

  <span class="hljs-attribute">_githubFetchProfile</span>: <span class="hljs-function"><span class="hljs-params">(email)</span> -&gt;</span>
    <span class="hljs-property">@_loading</span> = <span class="hljs-literal">true</span>
    <span class="hljs-property">@_githubRequest</span> <span class="hljs-string">"https://api.github.com/search/users?q=<span class="hljs-subst">#{email}</span>"</span>, <span class="hljs-function"><span class="hljs-params">(err, resp, data)</span> =&gt;</span>
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">if</span> err <span class="hljs-keyword">or</span> <span class="hljs-keyword">not</span> data

      <span class="hljs-built_in">console</span>.warn(data.message) <span class="hljs-keyword">if</span> data.message?</pre></div></div>
            
        </li>
        
        
        <li id="section-9">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-9">&#182;</a>
              </div>
              <p>Sometimes we get rate limit errors, etc., so we need to check and make
sure we’ve gotten items before pulling the first one.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      profile = data?.items?[<span class="hljs-number">0</span>] ? <span class="hljs-literal">false</span></pre></div></div>
            
        </li>
        
        
        <li id="section-10">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-10">&#182;</a>
              </div>
              <p>If a profile was found, make a second request for the user’s public
repositories.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      <span class="hljs-keyword">if</span> profile
        profile.repos = []
        <span class="hljs-property">@_githubRequest</span> profile.repos_url, <span class="hljs-function"><span class="hljs-params">(err, resp, repos)</span> =&gt;</span></pre></div></div>
            
        </li>
        
        
        <li id="section-11">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-11">&#182;</a>
              </div>
              <p>Sort the repositories by their stars (<code>-</code> for descending order)</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>          profile.repos = _.sortBy repos, <span class="hljs-function"><span class="hljs-params">(repo)</span> -&gt;</span> -repo.stargazers_count</pre></div></div>
            
        </li>
        
        
        <li id="section-12">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-12">&#182;</a>
              </div>
              <p>Trigger so that our React components refresh their state and display
the updated data.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>          <span class="hljs-property">@trigger</span>(@)

      <span class="hljs-property">@_loading</span> = <span class="hljs-literal">false</span>
      <span class="hljs-property">@_profile</span> = <span class="hljs-property">@_cache</span>[email] = profile
      <span class="hljs-property">@trigger</span>(@)</pre></div></div>
            
        </li>
        
        
        <li id="section-13">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-13">&#182;</a>
              </div>
              <p>Wrap the Node <code>request</code> library and pass the User-Agent header, which is required
by Github’s API. Also pass <code>json:true</code>, which causes responses to be automatically
parsed.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>   <span class="hljs-attribute">_githubRequest</span>: <span class="hljs-function"><span class="hljs-params">(url, callback)</span> -&gt;</span>
      request({<span class="hljs-attribute">url</span>: url, <span class="hljs-attribute">headers</span>: {<span class="hljs-string">'User-Agent'</span>: <span class="hljs-string">'request'</span>}, <span class="hljs-attribute">json</span>: <span class="hljs-literal">true</span>}, callback)</pre></div></div>
            
        </li>
        
    </ul>
  </div>
</body>
</html>
